﻿<Page x:Name="page"
      x:Class="SubtitleEditor.View.StylePage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:local="using:SubtitleEditor.View"
      xmlns:vm="using:SubtitleEditor.ViewModel"
      xmlns:con="using:SubtitleEditor.Converters"
      xmlns:ctr="using:SubtitleEditor.Controls"
      xmlns:ass="using:AssLoader"
      mc:Ignorable="d"
      NavigationCacheMode="Enabled"
      SizeChanged="Page_SizeChanged">
    <Page.Resources>
        <Storyboard x:Name="toPage"
                    Completed="toPage_Completed">
            <DoubleAnimation x:Name="leftAnimation"
                             Duration="0:0:0.4"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                             Storyboard.TargetName="listView">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation x:Name="rightAnimation"
                             Duration="0:0:0.4"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                             Storyboard.TargetName="borderDetail">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="hideRight"
                    Completed="hideRight_Completed">
            <DoubleAnimation Duration="0:0:0.3"
                             To="0"
                             Storyboard.TargetProperty="UIElement.Opacity"
                             Storyboard.TargetName="gridDetail">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="showRight">
            <DoubleAnimation Duration="0:0:0.3"
                             To="1"
                             Storyboard.TargetProperty="UIElement.Opacity"
                             Storyboard.TargetName="gridDetail">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="hideLeft">
            <DoubleAnimation Duration="0:0:0.4"
                             To="0.2"
                             Storyboard.TargetProperty="UIElement.Opacity"
                             Storyboard.TargetName="listView">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="showLeft">
            <DoubleAnimation Duration="0:0:0.4"
                             To="1"
                             Storyboard.TargetProperty="UIElement.Opacity"
                             Storyboard.TargetName="listView">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <x:Double x:Key="LeftSubPageWidth">320</x:Double>
        <x:Double x:Key="OnePageMinWidth">800</x:Double>
        <con:BoolVisibilityConverter x:Name="BoolVisibilityConverter"
                                     VisibleBoolValue="True" />
    </Page.Resources>
    <Grid x:Name="root">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MaxWidth="{StaticResource LeftSubPageWidth}"
                              MinWidth="{StaticResource LeftSubPageWidth}" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition IsStaggeringEnabled="True" />
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Rectangle x:Name="rectangleSplit"
                   Fill="{ThemeResource SystemControlBackgroundBaseLowBrush}"
                   HorizontalAlignment="Left"
                   Grid.Column="1"
                   Width="1" />
        <ListView x:Name="listView"
                  ItemsSource="{x:Bind ViewModel.Styles, Mode=OneWay}"
                  SelectedItem="{x:Bind ViewModel.SelectedStyle, Mode=TwoWay, Converter={StaticResource EmptyConverter}}"
                  SelectionChanged="listView_SelectionChanged"
                  Grid.ColumnSpan="2">
            <ListView.RenderTransform>
                <CompositeTransform />
            </ListView.RenderTransform>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="ass:Style">
                    <Grid>
                        <TextBlock Text="{x:Bind Name, Mode=OneWay}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter  Property="HorizontalContentAlignment"
                             Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition />
                    <ContentThemeTransition />
                </TransitionCollection>
            </ListView.ItemContainerTransitions>
        </ListView>
        <Border x:Name="borderDetail"
                Grid.ColumnSpan="2">
            <Border.RenderTransform>
                <CompositeTransform />
            </Border.RenderTransform>
            <Grid x:Name="gridDetail">
                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*"
                                   MinHeight="100" />
                </Grid.RowDefinitions>
                <ScrollViewer x:Name="scrollViewerDetail"
                              VerticalScrollBarVisibility="Auto">
                    <StackPanel x:Name="stackPanelDetail">
                        <Grid x:Name="gridStyleName">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <TextBox x:Name="textBoxStyleName"
                                     Text="{Binding ViewModel.SelectedStyleEditor.Name, ElementName=page, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                     PlaceholderText="Name" />
                            <Button Grid.Column="1"
                                    x:Name="buttonRename"
                                    Content="Rename"
                                    Command="{x:Bind ViewModel.SelectedStyleEditor.Rename}" />
                            <Button Grid.Column="2"
                                    Content="Delete"
                                    Command="{x:Bind ViewModel.SelectedStyleEditor.Delete}" />
                        </Grid>
                    </StackPanel>
                </ScrollViewer>
                <ctr:SamplePresenter Margin="0"
                                     Grid.Row="1"
                                     ImageSource="ms-appx:///Resources/massgrid.png">
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="{x:Bind ViewModel.SelectedStyleEditor.FontSize, Mode=OneWay}"
                               FontFamily="{x:Bind ViewModel.SelectedStyleEditor.FontName, Mode=OneWay}">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="{x:Bind ViewModel.SelectedStyleEditor.PrimaryColor, Converter={StaticResource ColorConverter}, Mode=OneWay}"/>
                        </TextBlock.Foreground>
                        <Run Language="en-us">Sample</Run> 
                        <Run Text="  "/>
                        <Run Language="ja-jp">サンプル</Run>
                        <LineBreak />
                        <Run Language="zh-Hant">樣例</Run>
                        <Run Text="  " />
                        <Run Language="zh-Hans">示例</Run>
                        <Run Text="  " />
                        <Run Language="ko-kr">견본</Run>
                    </TextBlock>
                </ctr:SamplePresenter>
            </Grid>
        </Border>
    </Grid>
</Page>
